<template>
	<view>
		<view class="navigate">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="head">
				<image src="../../static/bookcircle/remove.png" mode="widthFix" @click="remove"></image>
				<text>出售状况</text>
			</view>
		</view>

		<view class="mainbody">
			<view class="logo">
				<image src="../../static/otherphoto/logo.png" mode="widthFix"></image>
			</view>
			<view class="maincontent"  v-for="(item,index) in maincontentlist" :key="index">
				<view class="individual">
					<view class="in">
						<text>{{item.bookname}}</text>
						<text>{{item.name}}</text>
					</view>
					<view class="in">
						<text>{{item.belistedtime}}</text>
						<text>{{item.sellingtime}}</text>
					</view>
					<view class="in">
						<text>{{item.sell}}</text>
						<text>{{item.sellcondition}}</text>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maincontentlist: [{
					bookname: "书籍名称",
					belistedtime: "上架时间:",
					sell: "售出状况:",
					name: "数字图像处理",
					sellingtime: "2021-3-1",
					sellcondition: "已售出"

				}, {
					bookname: "书籍名称",
					belistedtime: "上架时间",
					sell: "售出状况",
					name: "数字电子技术",
					sellingtime: "2021-6-22",
					sellcondition: "未售出"
				}, {
					bookname: "书籍名称",
					belistedtime: "上架时间",
					sell: "售出状况",
					name: "web前端性能优化",
					sellingtime: "2021-6-22",
					sellcondition: "已售出"
				}, {
					bookname: "书籍名称",
					belistedtime: "上架时间",
					sell: "售出状况",
					name: "圆圈正义",
					sellingtime: "2022-3-1",
					sellcondition: "已售出"
				}]
			}
		},
		methods: {
			remove() {
				uni.switchTab({
					url: "./selling-books"
				})
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.navigate {
		/* #ifdef MP-WEIXIN */
		//解决微信小程序的胶囊问题
		width: calc(100% - 95px);
		/* #endif */
		/* #ifndef MP-WEIXIN*/
		width: 100%;

		/* #endif*/
		.head {

			height: 80rpx;
			background-color: #50d8be;

			image {
				height: 45rpx;
				width: 45rpx;
				margin-top: 15rpx;
			}

			text {
				margin: 18rpx 0 0 240rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: white;
			}
		}
	}

	.mainbody {
		width: 100%;
		height: 1200rpx;

		.logo {
			height: 200rpx;
			width: 100%;
			box-sizing: border-box;
			

			image {
				width: 200rpx;
				height: 200rpx;
				margin-left: 20rpx;
			}
		}
		.individual{
			width: 80%;
			height: 210rpx;
			background-color: #999999;
			margin: 20rpx 10% 0rpx 10%;
			box-sizing: border-box;
			 padding-left: 60rpx;
			.in{
				width: 90%;
				height:70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
			}
			
		}
	}
</style>
